<template>
    <div class="banner-container">
        <div class="filter-container">
            <el-button class="filter-item" type="primary" icon="el-icon-plus" @click="handleCreate">
                新增轮播图
            </el-button>
        </div>

        <el-table v-loading="listLoading" :data="list" element-loading-text="Loading" border fit highlight-current-row>
            <el-table-column align="center" label="ID" width="95">
                <template slot-scope="scope">
                    {{ scope.row.id }}
                </template>
            </el-table-column>
            <el-table-column label="图片" width="200">
                <template slot-scope="scope">
                    <el-image style="width: 100px; height: 100px" :src="scope.row.imageUrl" fit="cover" />
                </template>
            </el-table-column>
            <el-table-column label="标题" align="center">
                <template slot-scope="scope">
                    {{ scope.row.title }}
                </template>
            </el-table-column>
            <el-table-column label="链接类型" align="center">
                <template slot-scope="scope">
                    <el-tag :type="scope.row.linkType === 'scenic' ? 'success' : 'info'">
                        {{ scope.row.linkType === 'scenic' ? '景点' : '其他' }}
                    </el-tag>
                </template>
            </el-table-column>
            <el-table-column label="排序" align="center" width="95">
                <template slot-scope="scope">
                    {{ scope.row.sort }}
                </template>
            </el-table-column>
            <el-table-column label="操作" align="center" width="230" class-name="small-padding fixed-width">
                <template slot-scope="{row}">
                    <el-button type="primary" size="mini" @click="handleUpdate(row)">
                        编辑
                    </el-button>
                    <el-button size="mini" type="danger" @click="handleDelete(row)">
                        删除
                    </el-button>
                </template>
            </el-table-column>
        </el-table>

        <!-- 新增/编辑对话框 -->
        <el-dialog :title="dialogTitle" :visible.sync="dialogVisible">
            <el-form ref="dataForm" :rules="rules" :model="temp" label-position="left" label-width="100px">
                <el-form-item label="标题" prop="title">
                    <el-input v-model="temp.title" />
                </el-form-item>
                <el-form-item label="图片" prop="imageUrl">
                    <el-upload class="avatar-uploader" action="/api/upload" :show-file-list="false"
                        :on-success="handleImageSuccess" :before-upload="beforeImageUpload">
                        <img v-if="temp.imageUrl" :src="temp.imageUrl" class="avatar">
                        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                    </el-upload>
                </el-form-item>
                <el-form-item label="链接类型" prop="linkType">
                    <el-select v-model="temp.linkType" placeholder="请选择">
                        <el-option label="景点" value="scenic" />
                        <el-option label="其他" value="other" />
                    </el-select>
                </el-form-item>
                <el-form-item label="排序" prop="sort">
                    <el-input-number v-model="temp.sort" :min="1" :max="100" />
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">
                    取消
                </el-button>
                <el-button type="primary" @click="dialogStatus === 'create' ? createData() : updateData()">
                    确定
                </el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
export default {
    name: 'Banner',
    data() {
        return {
            list: [],
            listLoading: true,
            dialogVisible: false,
            dialogStatus: '',
            dialogTitle: '',
            temp: {
                id: undefined,
                title: '',
                imageUrl: '',
                linkType: 'scenic',
                sort: 1
            },
            rules: {
                title: [{ required: true, message: '请输入标题', trigger: 'blur' }],
                imageUrl: [{ required: true, message: '请上传图片', trigger: 'change' }],
                linkType: [{ required: true, message: '请选择链接类型', trigger: 'change' }],
                sort: [{ required: true, message: '请输入排序', trigger: 'blur' }]
            }
        }
    },
    created() {
        this.getList()
    },
    methods: {
        async getList() {
            this.listLoading = true
            // TODO: 调用后端API获取轮播图列表
            // const { data } = await getBannerList()
            // this.list = data
            this.list = [
                {
                    id: 1,
                    title: '测试轮播图1',
                    imageUrl: 'https://example.com/image1.jpg',
                    linkType: 'scenic',
                    sort: 1
                }
            ]
            this.listLoading = false
        },
        resetTemp() {
            this.temp = {
                id: undefined,
                title: '',
                imageUrl: '',
                linkType: 'scenic',
                sort: 1
            }
        },
        handleCreate() {
            this.resetTemp()
            this.dialogStatus = 'create'
            this.dialogTitle = '新增轮播图'
            this.dialogVisible = true
            this.$nextTick(() => {
                this.$refs['dataForm'].clearValidate()
            })
        },
        handleUpdate(row) {
            this.temp = Object.assign({}, row)
            this.dialogStatus = 'update'
            this.dialogTitle = '编辑轮播图'
            this.dialogVisible = true
            this.$nextTick(() => {
                this.$refs['dataForm'].clearValidate()
            })
        },
        async createData() {
            this.$refs['dataForm'].validate(async (valid) => {
                if (valid) {
                    // TODO: 调用后端API创建轮播图
                    // await createBanner(this.temp)
                    this.dialogVisible = false
                    this.$notify({
                        title: '成功',
                        message: '创建成功',
                        type: 'success',
                        duration: 2000
                    })
                    this.getList()
                }
            })
        },
        async updateData() {
            this.$refs['dataForm'].validate(async (valid) => {
                if (valid) {
                    // TODO: 调用后端API更新轮播图
                    // await updateBanner(this.temp)
                    this.dialogVisible = false
                    this.$notify({
                        title: '成功',
                        message: '更新成功',
                        type: 'success',
                        duration: 2000
                    })
                    this.getList()
                }
            })
        },
        async handleDelete(row) {
            this.$confirm('确认删除该轮播图吗?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(async () => {
                // TODO: 调用后端API删除轮播图
                // await deleteBanner(row.id)
                this.$notify({
                    title: '成功',
                    message: '删除成功',
                    type: 'success',
                    duration: 2000
                })
                this.getList()
            })
        },
        handleImageSuccess(res, file) {
            this.temp.imageUrl = res.url
        },
        beforeImageUpload(file) {
            const isJPG = file.type === 'image/jpeg' || file.type === 'image/png'
            const isLt2M = file.size / 1024 / 1024 < 2

            if (!isJPG) {
                this.$message.error('上传图片只能是 JPG/PNG 格式!')
            }
            if (!isLt2M) {
                this.$message.error('上传图片大小不能超过 2MB!')
            }
            return isJPG && isLt2M
        }
    }
}
</script>

<style scoped>
.banner-container {
    padding: 20px;
}

.filter-container {
    padding-bottom: 10px;
}

.avatar-uploader {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    width: 178px;
    height: 178px;
}

.avatar-uploader:hover {
    border-color: #409EFF;
}

.avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
}

.avatar {
    width: 178px;
    height: 178px;
    display: block;
}
</style> 